<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="testimonial">
        <p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan.
            Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus
            laoreet pretium diam ac semper "</p>
        <img src="../assets/women.jpg" alt="Jane Doe">
        <h4>Jane Doe</h4>
    </div>

    <div class="testimonial">
        <p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan.
            Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus
            laoreet pretium diam ac semper "</p>
        <img src="../assets/men.jpg" alt="John Doe">
        <h4>John Doe</h4>
    </div>
</body>

<style>
    .testimonial {
        --w: 600px;
        --c: calc(100vw - var(--w));

        max-width: 500px;
        margin: 20px auto clamp(20px, var(--c)*-1000, 120px);
        position: relative;
        padding-right: clamp(0px, var(--c)*1000, 140px);
    }

    .testimonial p {
        padding: 10px;
        background: #37b1d9;
        border-radius: 15px;
        margin: 0;
        font-size: 20px;
    }

    .testimonial img {
        position: absolute;
        width: clamp(60px, var(--c)*1000, 100px);
        border-radius: 50%;
        right: clamp(0px, var(--c)*-1000, 40px);
        top: clamp(0%, var(--c)*-1000, calc(100% + 15px));
    }

    .testimonial h4 {
        position: absolute;
        top: clamp(110px, var(--c)*-1000, calc(100% + 35px));
        right: clamp(50px, var(--c)*-1000, 110px);
        transform: translate(clamp(0px, var(--c)*1000, 50%));
        margin: 0;
    }

    .testimonial:before {
        content: "";
        position: absolute;
        top: clamp(50px, var(--c)*-1000, calc(100% - 18px));
        right: clamp(0px, var(--c)*1000, 110px);
        width: 40px;
        height: 40px;
        background: #37b1d9;
        clip-path: polygon(20% 0, 100% 00%, 0 100%);
    }
</style>

</html>